<!DOCTYPE html>
<html>
<head>
    <title>Data binding - subdata</title>
    <link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
    <script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
    <script src="../common/treedata.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../common/samples.css">
</head>
<body>
<div class='header_comment'>Data binding - subdata</div>

<input type="button" value="Add to top" onClick="addToTop()"/>
<input type="button" value="Add to selected parent" onClick="addToParent()"/>
<input type="button" value="Add as 2nd child of Shawshank Redemption" onClick="addAsChild()"/>
<input type="button" value="Remove selected node"  onClick="removeSelected()"/>

<script type="text/javascript" charset="utf-8">

    var tree_data = [
        {id:"root", value:"Films data", open:true,
            records:[ { id:"1.1", value:"Films 1" }, { id:"1.2", value:"Films 2" } ],
            data:[
            { id:"1", open:true, value:"The Shawshank Redemption",
                records:[ { id:"x.2", value:"Shawshank" } ],
                data:[
                    { id:"1.2", value:"Part 2", records:[
                        { id:"1.2.1", value:"Page 1" },
                        { id:"1.2.2", value:"Page 2" },
                        { id:"1.2.3", value:"Page 3" },
                        { id:"1.2.4", value:"Page 4" },
                        { id:"1.2.5", value:"Page 5" }
                    ]},
            ]},
            { id:"2", open:true, value:"The Godfather", records:[
                { id:"2.1", value:"Part 1" },
                { id:"2.2", value:"Part 2" }
            ]}
        ]}
    ];

    var tree1 = {
        view:"tree",
        id:"tree",
        select:true,
        template:"{common.icon()} {common.folder()} <span>#value#</span>",
        data: tree_data
    };

    var grid1 = {
        view:"datatable",
        id:"grid1",
        columns:[
            { id:"id" },
            { id:"value", fillspace:1, editor:"text" }
        ], editable:true
    };

    var grid2 = {
        view:"datatable",
        id:"grid2",
        columns:[
            { id:"id" },
            { id:"value", fillspace:1, editor:"text" }
        ], editable:true
    };

    webix.ui({
        cols:[
            { header:"Master Tree", body:tree1 },
            { header:"Data", body:grid1 },
            { header:"Childs and Data", body:grid2 }
        ]
    })

    $$("grid1").bind( $$("tree"), "$data", "records");
    $$("grid2").bind( $$("tree"), "$data", function(obj, source){
        if (!obj) return this.clearAll();
        var fulldata = [].concat(source.data.getBranch(obj.id)).concat(obj.records);
        this.data.importData(fulldata, true);
    }); 

    function addToTop(){
        $$("tree").add({ value:"New item"}, 0);
    }

    function addToParent(){
        var parentId= $$("tree").getSelectedId();
        if(parentId)
            $$("tree").add( {value:"New item"}, 0, parentId);
        else
            webix.alert("Select node")
    }

    function addAsChild(){
        $$("tree").select("1");
        var parentId = $$("tree").getSelectedId();
        var pos = $$("tree").getBranchIndex("1.2"); //'1.2' is the 'Part2' item's id
        $$("tree").add( {value:"New item"}, pos, parentId);
    }

    function removeSelected(){
        var nodeId = $$("tree").getSelectedId();
        $$("tree").remove(nodeId);
    }


</script>
</body>
</html>